<template>
  <div class="carlistcomp">
    <div class="carlist" v-show="showList&&cars.length>0">
      <div class="carlistitle">
        车辆列表
        <img src="@/assets/refresh.png" @click="refresh" class="refresh" :style="refreshStyle" />
      </div>
      <div class="counts">
        总计：{{cars.length}},
        在线：{{counts.online}},
        移动：{{counts.moving}},
        离线：{{counts.offline}}
      </div>
      <el-input
        v-model="srarchKeyWord"
        placeholder="输入车牌号或名称搜索"
        clearable
        prefix-icon="el-icon-search"
        class="searchInput"
      ></el-input>
      <ul>
        <li
          v-for="(car, index) in cars"
          :key="index"
          @click="showCarInfo(car)"
          v-show="filterCar(car)"
        >
          <div class="left">
            <img src="@/assets/car_on.png" alt v-if="car.carOffline==0" class="carStatusImg" />
            <img src="@/assets/car_off.png" alt v-if="car.carOffline==1" class="carStatusImg" />
            <span class="platenumber" :style="{'textDecoration':car.macid?'none':'line-through'}">{{car.fullName||car.platenumber}}</span>
          </div>
          <div class="right">
            <span class="offline">{{car.carOffline==0?"在线":"离线"}}</span>
            <span class="speed">{{car.speed}}km/h</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="carIcon" v-show="!showList">
      <img src="@/assets/car_on.png" @click="showList=true;" />
    </div>
    <el-dialog title="车辆详情" :visible.sync="dialogVisible" :width="isMobile?'80%':'30%'">
      <div class="info2">
        <span>车牌号</span>
        {{carInfo.platenumber}}
      </div>
      <div class="info2">
        <span>名称</span>
        {{carInfo.fullName}}
      </div>
      <div class="info2">
        <span>车速</span>
        {{carInfo.speed}}km/h
      </div>
      <div class="info2">
        <span>最后定位时间</span>
        {{carInfo.gpstime|date}}
      </div>
      <div class="info2">
        <span>OBD当前状态</span>
        {{carInfo.offline=="1"?"在线":"离线"}}
      </div>
      <div class="info2">
        <span>车辆当前状态</span>
        {{carInfo.carOffline==0?"在线":"离线"}}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//车辆列表组件
import "./index.scss";
export default {
  props: {
    cars: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },

  data() {
    return {
      srarchKeyWord: "",
      isMobile: false,
      showList: true,
      dialogVisible: false,
      carInfo: {},
      counts: {
        online: 0,
        moving: 0,
        offline: 0
      },
      refreshStyle: { transform: "0deg", transition: "all linear 1s" }
    };
  },
  watch: {
    cars() {
      //计算在线离线移动车辆数
      this.counts.online = 0;
      this.counts.moving = 0;
      this.counts.offline = 0;
      this.cars.forEach(car => {
        if (car.carOffline == 1) {
          this.counts.offline++;
        } else {
          this.counts.online++;
          if (Number.parseFloat(car.speed) > 0) {
            this.counts.moving++;
          }
        }
      });
    }
  },
  beforeMount() {
    window.addEventListener("resize", this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
  },
  filters: {
    // srarch(list) {
    //   return;
    // }
  },
  methods: {
    isMobile_() {
      const { body } = document;
      const WIDTH = 996; // refer to Bootstrap's responsive design
      const rect = body.getBoundingClientRect();
      return rect.width - 1 < WIDTH;
    },
    resizeHandler() {
      if (!document.hidden) {
        this.isMobile = this.isMobile_();
        console.log("isMobile" + this.isMobile);
      }
    },
    showCarInfo(car) {
      // this.carInfo = car;
      // this.dialogVisible = true;
      // console.log(car);
      if (!car.macid) {
        this.$message({
          message: car.fullName + "还没有绑定OBD，无法查看",
          type: "error"
        });
      } else {
        this.$emit("carclick", car);
      }
    },
    //关闭对话框和列表  由父组件调用
    closeDialogAndList() {
      this.showList = false;
      this.dialogVisible = false;
    },
    filterCar(car) {
      if (!this.srarchKeyWord) {
        return true;
      } else if (
        car.fullName.indexOf(this.srarchKeyWord) >= 0 ||
        (car.macid && car.macid.indexOf(this.srarchKeyWord) >= 0)
      ) {
        return true;
      } else {
        return false;
      }
    },
    refresh() {
      this.refreshStyle.transition = "all linear 1s";
      this.refreshStyle.transform = "rotate(720deg)";
      setTimeout(() => {
        this.refreshStyle.transition = "left linear 0s";
        this.refreshStyle.transform = "rotate(0deg)";
      }, 600);
      this.$emit("refresh");
    }
  },
  mounted() {
    this.resizeHandler();
  }
};
</script>
<style lang="scss" scoped>
.info2 {
  display: flex;
  span {
    font-weight: bold;
    width: 140px;
    text-align: right;
    margin-right: 10px;
  }
}
</style>